<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/common-list.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<div class="header-con">
			<a class="navbar-header" href="">
				<img src="../images/logo.png" alt="">
			</a>
			<ul>
				<li>
					<a href="">首页</a>
				</li>
				<li>
					<a href="">人资管理</a>
				</li>
				<li>
					<a href="">指标设置</a>
				</li>
				<li>
					<a href="">数据统计</a>
				</li>
				<li>
					<a href="">工作时设置</a>
				</li>
				<li>
					<a href="">财务管理</a>
				</li>
			</ul>
		</div>
		<div class="peo-message">
			<div class="peo-cir">
				<!-- <img src="" alt=""> -->
			</div>
			<em>黑披士</em>
			<span class="down-list"></span>
			<!-- <ul>
				<li>123</li>
			</ul> -->
		</div>
	</header>
	<div class="boxed clearfix">
		<div class="mask">
			<div class="mask-box">
				<div class="mask-head">
					<h4>指标设置</h4>
					<span></span>
				</div>
				<div class="mask-con">
					<div class="mask-marc">
						<ul>
							<li>
								<span>姓名:</span>
								<em>学员名</em>
							</li>
							<li class="m-marc">
								<strong>服务顾问:</strong>
								<div class="single-box">
									<div class="single-downbtn">
										<span>全部部门</span>
										<em></em>
									</div>
									<div class="single-dropdown">
										<em></em>
										<input type="text" placeholder="搜索">
										<ul>
											<li>学员1</li>
											<li>学员2</li>
											<li>学员3</li>
											<li>学员4</li>
											<li>学员5</li>
										</ul>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="mask-confirm">确认</div>
			</div>
		</div>
		<div class="common-tit">
			<h2>未分配意向学员</h2>
			<span>团队管理 > 未分配意向学员</span>
			<!-- <a class="add-staff" href="javascript:;">添加员工</a> -->
		</div>
		<div class="n-assig">
			<div class="scrollbox">
				<table>
					<thead>
						<tr>
							<th class="as-img">头像</th>	
							<th class="as-name">姓名</th>
							<th class="as-sex">性别</th>
							<th class="as-age">年龄阶段</th>
							<th class="as-gro">学员分组</th>
							<th class="as-fd">意向分店</th>
							<th class="as-operation">
								<div>
									<em>操作</em>
								</div>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<div class="as-imgbox">
									<img src="" alt="">
								</div>
							</td>	
							<td>张幻想</td>
							<td>男</td>
							<td>幼儿</td>
							<td>自定义分组名称</td>
							<td>这是分店名字</td>
							<td class="as-operation">
								<div>
									<em>[</em>
									<a href="">查看详情</a>
									<em>]</em>
									<em>[</em>
									<span>指派专员</span>
									<em>]</em>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="as-imgbox">
									<img src="" alt="">
								</div>
							</td>	
							<td>张幻想</td>
							<td>男</td>
							<td>幼儿</td>
							<td>自定义分组名称</td>
							<td>这是分店名字</td>
							<td class="as-operation">
								<div>
									<em>[</em>
									<a href="">查看详情</a>
									<em>]</em>
									<em>[</em>
									<span>指派专员</span>
									<em>]</em>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="as-imgbox">
									<img src="" alt="">
								</div>
							</td>	
							<td>张幻想</td>
							<td>男</td>
							<td>幼儿</td>
							<td>自定义分组名称</td>
							<td>这是分店名字</td>
							<td class="as-operation">
								<div>
									<em>[</em>
									<a href="">查看详情</a>
									<em>]</em>
									<em>[</em>
									<span>指派专员</span>
									<em>]</em>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="as-imgbox">
									<img src="" alt="">
								</div>
							</td>	
							<td>张幻想</td>
							<td>男</td>
							<td>幼儿</td>
							<td>自定义分组名称</td>
							<td>这是分店名字</td>
							<td class="as-operation">
								<div>
									<em>[</em>
									<a href="">查看详情</a>
									<em>]</em>
									<em>[</em>
									<span>指派专员</span>
									<em>]</em>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/common-list.js"></script>
	<script>
		/* 单选下拉列表 */
		$(".single-downbtn").on("click", function() {
			if ($(this).next(".single-dropdown").hasClass("menuopen")) {
				$(this).next(".single-dropdown").removeClass("menuopen");
			} else {
				$(this).next(".single-dropdown").addClass("menuopen");
				$(this).parent().hover(function() {
					
				}, function() {
					$(this).children(".single-dropdown").removeClass("menuopen");
				});
				$(".single-box .menuopen li").on("click", function() {
					$(this).parent().parent().removeClass("menuopen");
					$(this).parent().parent().parent().find("span").text($(this).text());
					$(this).parent().parent().find("input").val("");
					$(".single-dropdown li").removeClass("mul-hide");
				});
				$(this).next("div").find("input").on('input',function(){ 
					console.log($(this));
					if ($(this).val() != "") {
				  		console.log($(this).val());
				  		$(".single-dropdown li").addClass("mul-hide");
				  		console.log($($(".single-dropdown li:contains(" + $(this).val() + ")")).removeClass("mul-hide"));
					} else {
						$(".single-dropdown li").removeClass("mul-hide");
					}
				})
			}
		}); 
	</script>
</body>
</html>